<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="ft"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="<%=basePath%>/css/common.css" rel="stylesheet" />
<link href="<%=basePath%>/css/index.css" rel="stylesheet"
	type="text/css">
<script type="text/javascript" src="<%=basePath%>/script/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/script/common.js"></script>
<title>Insert title here</title>
<style>
/*上下滚动*/
#scrollDiv {
	width: 400px;
	height: 30px;
	line-height: 30px;
	overflow: hidden;
}

#scrollDiv li {
	height: 30px;
	padding-left: 10px;
}
.fn-left1{
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.monthSupply{
	border-radius: 10px;
	background-color: #245580;
	height: 90px;
	color:#F1F1F1;
	width:50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 25px;
	margin: 50px 0px 50px 0px;
}
#money{
	font-size: 65px;;
}
*{
	list-style-type: none;
}
.cost ul,.month ul{
	display: flex;
}
.cost ul li,.month ul li{
	border:1px solid;
	border-radius: 5px;
	width: 70px;
	height: 30px;
	line-height: 30px;
	margin-left: 20px;
	margin-right: 20px;
	text-align: center;
	cursor:pointer;
}
#loanAmount{
	border: 0px;
	border-bottom: 1px  solid;
	width: 550px;
	margin-top: 50px;
	margin-bottom: 50px;
	font-size: 25px;
}
#calcul{
	margin-top: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #245580;
	border: 1px solid;
	border-radius: 5px;
	color: #F1F1F1;
	width: 350px;
	height: 50px;
	cursor:pointer;
}
</style>

<script type="text/javascript">
	// 上下滚动
	function AutoScroll(obj) {
		$(obj).find("ul:first").animate({
			marginTop : "-25px"
		}, 500, function() {
			$(this).css({
				marginTop : "0px"
			}).find("li:first").appendTo(this);
		});
	}
	$(document).ready(function() {
		var myar = setInterval('AutoScroll("#scrollDiv")', 3000);
		$("#scrollDiv").hover(function() {
			clearInterval(myar);
		}, function() {
			myar = setInterval('AutoScroll("#scrollDiv")', 3000)
		}); //当鼠标放上去的时候，滚动停止，鼠标离开的时候滚动开始
	});
</script>
</head>
<body>
	<!-- 导航栏 --><jsp:include page="head.jsp"></jsp:include>
	<!--banner-->
	<div class="flexslider" style="border: 1px solid; ">
		<ul class="slides">
			
				<li
				style="background-image: url(${pageContext.request.contextPath}/images/banner.jpg); width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 0; background-position: 50% 0px; background-repeat: no-repeat no-repeat;"
				class="">
				</li>
				<li
				style="background-image: url(${pageContext.request.contextPath}/images/banner1.jpg); width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 0; background-position: 50% 0px; background-repeat: no-repeat no-repeat;"
				class="">
				</li>
				<li
				style="background-image: url(${pageContext.request.contextPath}/images/banner2.jpg); width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 0; background-position: 50% 0px; background-repeat: no-repeat no-repeat;"
				class="">
				</li>
				<li
				style="background-image: url(${pageContext.request.contextPath}/images/banner3.jpg); width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 0; background-position: 50% 0px; background-repeat: no-repeat no-repeat;"
				class="">
				</li>
		</ul>
	</div>
	<script
		src="${pageContext.request.contextPath}/script/jquery.flexslider-min.js"></script>
	<script>
	 
	
	
	
		$(function() {
			//判断最新公告是否为空,为空加载通知
			var list = "${listss}";
			if (list == "") {
				//window.location = "${pageContext.request.contextPath}/notice/noticetop5.do";
			}

			$('.flexslider').flexslider({
				directionNav : true,
				pauseOnAction : false
				
			});
			//产品列表滚动
			var pLength = $('.pListContentBox > li').length;
			var cishu = pLength - 4;
			var n = 0;
			$('.pListContentBox').css({
				'width' : pLength * 245 + 'px'
			});
			if (pLength > 4) {
				$('.pListRight').addClass('curr');
			}
			$('.pListRight').on('click', function() {
				if (cishu > 0) {
					//alert('1');
					n++;
					cishu--;
					$('.pListContentBox').animate({
						'left' : '-' + n * 244 + 'px'
					}, 500);
					if (cishu == 0) {
						$('.pListRight').removeClass('curr');
					}
					if (n > 0) {
						$('.pListLeft').addClass('curr');
					}
				}
			});
			$('.pListLeft').on('click', function() {
				if (n > 0) {
					n--;
					cishu++;
					$('.pListContentBox').animate({
						'left' : '-' + n * 244 + 'px'
					}, 500);
					if (n == 0) {
						$('.pListLeft').removeClass('curr');
					}
					if (cishu > 0) {
						$('.pListRight').addClass('curr');
					}
				}
			});
			//alert(pLength);
		});
	</script>
	<!--注册登陆模块-->
	<!--<div class="login_float">
  <div class="index_login">
    <div class="login_name">亿人宝年化收益率</div>
    <div class="login_num">10<font>%</font>~17<font>%</font></div>
    <div class="login_info"> <span class="login_info1"><font>3~4倍</font>定期存款收益</span> <span class="login_info2"><font>30倍</font>活期存款收益</span> </div>
    <div class="clear"></div>
    <div class="login_btn"><a href="register.html">立即注册</a></div>
    <p class="login_reg">已有账号，<a href="login.html">立即登录</a></p>
  </div>
</div>-->
	<script type="text/javascript">
		var gaintop;
		$(function() {
			gaintop = $(".login_float").css("top");
			$(".login_float").css("top", -695);
			$(".login_float").show();
			$(".login_float").animate({
				top : gaintop,
				opacity : 1
			}, 800);
			$(".login_float").animate({
				top : '-=12px',
				opacity : 1
			}, 200);
			$(".login_float").animate({
				top : gaintop,
				opacity : 1
			}, 200);
			$(".login_float").animate({
				top : '-=6px',
				opacity : 1
			}, 200);
			$(".login_float").animate({
				top : gaintop,
				opacity : 1
			}, 200);
			$(".login_float").animate({
				top : '-=2px',
				opacity : 1
			}, 100);
			$(".login_float").animate({
				top : gaintop,
				opacity : 1
			}, 100);
			
			

			$(".cost li").click(function(){
				var price = $(this).attr("data-price");
				if(price==0){
					$("#loanAmount").val("");	
				}else{
					$("#loanAmount").val(price);		
				}
			
				$(this).css({"background-color":"aqua"});
				$(this).siblings().css("background-color","#F1F1F1");
			});
			
			$(".month li").click(function(){
				//alert(this);
				$(this).css({"background-color":"aqua"});
				$(this).siblings().css("background-color","#F1F1F1");
			});
		});
		
		
		
	</script>
	
	<div class="new-announcement">
		<div class="new-announcement-title">最新公告</div>
		<div class="new-announcement-content">
			<div id="scrollDiv">
				<ul style="margin-top: 0px;">
					<c:forEach items="${listss}" var="nots">
						<li><a class="black-link"
							href="${pageContext.request.contextPath}/notice/notget.do?ids=${nots.noticeid }"
							target="_blank"> ${nots.noticetitle }</a></li>
					</c:forEach>
					<!--  -->
				</ul>
			</div>
		</div>
		<a class="more"
			href="${pageContext.request.contextPath}/notice/notlist.do?ids=1">更多</a>
	</div>
	<div class="ipubs">
		
		</span> <span class="o2">累积放贷金额:<strong>
				<fmt:formatNumber value="22222" pattern="#.##" /><!-- 1,047,288,128.79 -->
		</strong>元
		</span><span class="o2">网站已运行:<strong>
				365
		</strong>天
		</span><span class="o4">注册人数:<strong>${size}</strong>人
		</span>
	</div>
	
	<div class="feature">
		<a class="fea1" href="#"> <i></i>
			<h3>高效率</h3> <span>工作日随时审批<br> 最快高速放贷
		</span>
		</a> <a class="fea2" href="#"> <i></i>
			<h3>安全理财</h3> <span>100%本息保障<br> 实物质押，多重风控审核
		</span>
		</a> <a class="fea3" href="#"> <i></i>
			<h3>随时赎回</h3> <span>两步赎回您的资金<br> 最快当日到账
		</span>
		</a> <a class="fea4" href="#"> <i></i>
			<h3>随时随地理财</h3> <span>下载手机客户端<br> 随时随地轻松理财
		</span>
		</a>
	</div>
	<!--中间内容-->
	<div class="main clearfix mrt30" data-target="sideMenu">
		<div class="wrap">
			<div class="page-left fn-left">
				<div class="fn-left1">
				<div class="monthSupply">
					<span class="supply">每月应还:</span>
					<span id="money">123123</span><span class="supply yuan">元</span>
				</div>
				
				<div class="cost">
					<ul><span>金额：</span>
					<li class="price" data-price="20000">2万</li>
					<li class="price" data-price="30000">3万</li>
					<li class="price" data-price="50000">5万</li>
					<li class="price" data-price="80000">8万</li>
					<li class="price" data-price="0">其他</li>
					</ul>
				</div>
				
				<div class="putCost" >
					<input type="text" id="loanAmount" placeholder="请输入您的借款额度" style="background-color: #F1F1F1;">
				</div>
				
				<div class="month">
				<ul><span>借多久：</span>
				<li class="time" data-time="12">12个月</li>
				<li class="time" data-time="18">18个月</li>
				<li class="time" data-time="24">24个月</li>
				<li class="time" data-time="36">36个月</li>
				<li class="time" data-time="48">48个月</li>
				</ul>
				</div>
				
				<div id="calcul">开始计算</div>
				
				</div>
				
			</div>
			<div class="page-right fn-right" style="top: 0px;">
				<div class="mod-risk-tip">
					<i class="icon icon-tip"></i><a href="#" class="c-orange">收益与风险并存，请理性选择平台</a>
				</div>
				<div class="mod mod-notice mrt20">
					<div class="hd">
						<h3>网站公告</h3>
						<a href="/p2p/notice/notlist.do?ids=1" class="fn-right">更多&gt;</a>
					</div>
					<div class="bd">
						<div class="article-list clearfix">
							<ul>

								<c:forEach items="${listss}" var="nots">
									<li><a
										href="${pageContext.request.contextPath}/notice/notget.do?ids=${nots.noticeid }"
										title="${nots.noticetitle }">
											${ft:substring(nots.noticetitle,0,13) } </a> <span class="date"><fmt:formatDate
												value="${nots.noticelasttime }" /></span></li>
								</c:forEach>
							</ul>
						</div>
					</div>
				</div>
			
					<div class="bd">
						<div class="ui-tab-cont">
							<div class="ui-tab-item active">
								<%-- <div class="headlines">
									<img src="<%=basePath%>/images/news.jpg"> <a title="平台遭遇P2P滑稽抄袭"
										target="_blank" href="#">平台遭遇P2P滑稽抄袭</a><br> <span
										class="des">抄袭者居然把被抄袭者的名字一起抄下来，这样的乌龙抄袭你见过没...</span>
								</div> --%>
								<div class="article-list">
									<ul>
										<c:forEach items="${meiti}" var="nots">
											<li><a
												href="${pageContext.request.contextPath}/notice/notget.do?ids=${nots.noticeid }"
												title="${nots.noticetitle }" target="_blank">${nots.noticetitle }</a></li>
										</c:forEach>
									</ul>
								</div>
							</div>

						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
	<script src="<%=basePath%>script/index.js"></script>
	<div class="partners wrap clearfix mrb30">
		<div class="partners-inner ui-tab">
			<div class="hd">
				<div class="ui-tab-nav">
					<i class="icon icon-cur" style="left: 151px;"></i>
					<ul>
						<li class=""><a href="#">合作机构</a></li>
						<li class="active"><a href="#">友情链接</a></li>
					</ul>
				</div>
			</div>
			<div class="bd">
				<div class="ui-tab-cont">
					<div class="ui-tab-item active">
						<div class="img-scroll">
							<div class="container">
								<ul>
									<li><img src="<%=basePath%>/images/logo_sbcvc.png"
										width="152" height="52" alt="软银"></li>
									<li><img src="<%=basePath%>/images/logo_abc.png"
										width="152" height="52" alt="农业银行"></li>
									<li><img src="<%=basePath%>/images/logo_wdzj.png"
										width="152" height="52" alt="网贷之家"></li>
									<li><img src="<%=basePath%>/images/logo_baidu.png"
										width="152" height="52" alt="百度"></li>
									<li><img src="<%=basePath%>/images/logo_aqb.png"
										width="152" height="52" alt="安全宝"></li>
									<li><img src="<%=basePath%>/images/logo_gds.png"
										width="152" height="52" alt="万国数据"></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="ui-tab-item">
						<div class="links">
							<a target="_blank" href="http://www.wd361.com">网贷互联</a> <a
								target="_blank" href="http://www.bjzq.com.cn">北京证券网</a> <a
								target="_blank" href="http://v.yidai.com/">易贷微理财</a> <a
								target="_blank" href="http://www.wangdaicaifu.com">P2P</a> <a
								target="_blank" href="http://www.p2pchina.com">网贷中国</a> <a
								target="_blank" href="http://www.wangdaibangshou.com">网贷帮手</a> <a
								target="_blank" href="https://www.okcoin.cn">比特币网</a> <a
								target="_blank" href="http://www.p2p110.com">网贷110</a> <a
								target="_blank" href="http://www.zcmall.com">招财猫理财</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--网站底部-->
	<jsp:include page="bottom.jsp"></jsp:include>
</html>